<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .my{
           background: #cccccc; 
        }
    </style>
</head>

<body>
    <div>
        账号:
        <input type="text" id="user">
    </div>
    <div>
        密码:
        <input type="text" id="pass">
    </div>
    <div id="submit">
        注册
    </div>
    <div id="loginSubmit">
        登陆
    </div>
    <textarea name="" id="text" cols="30" rows="10" ></textarea>
    <div id="postMsg">
        发送
    </div>
    <ul>
        
    </ul>



</body>
<script src="http://localhost:8080/socket.io/socket.io.js"></script>
<script src='http://libs.baidu.com/jquery/2.1.1/jquery.min.js'></script>
<script>
    let sock = io.connect('ws://localhost:8080/');
    let cur_username='';
    let myText='';
    sock.on('reg_ret', (code, msg) => {
        if (code) {
            alert('注册失败' + msg)
        } else {
            alert('注册成功')
        }
    })
    sock.on('login_ret', (code, msg) => {
        if (code) {
            alert('登陆失败' + msg)
        } else {
            alert('登陆成功')
            cur_username=$('#user').val()
        }
    })
    sock.on('msg_ret', (code,msg) => {
        if (code) {
            alert('消息发送失败'+msg);
        } else {
            $('ul').append(`<li class='my'><h4>${cur_username}</h4><p>${myText}</p></li>`);
            // $('#text').val('');
        }
    })
    sock.on('msg',(name,text)=>{
        $('ul').append(`<li><h4>${name}</h4><p>${text}</p></li>`);
    })
    $('#submit').click(function () {
        sock.emit('reg', $('#user').val(), $('#pass').val())
    })
    $('#loginSubmit').click(function () {
        sock.emit('login', $('#user').val(), $('#pass').val())
    })
    $('#postMsg').click(function(){
        myText=$('#text').val();
        sock.emit('msg',$('#text').val())
    })
</script>

</html>